﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Sketch2Code - Transform sketches into HTML markup automagically!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!--link href="/Content/octicons.css" rel="stylesheet" type="text/css" /-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <link href="/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="header" class="container-fluid">
            <div class="row">
                <div class="col">
                    <img alt="Microsoft Logo" src="/content/img/logo_MS.png">
                </div>

                <div class="col text-right">
                    <a target="_blank" href="https://www.ailab.microsoft.com/">
                        AI Lab
                    </a>
                </div>
            </div>
        </div>

        <div class="container-fluid hidden-responsive">
            <div id="steps" class="row justify-content-center">
                <div class="col">
                    <span class="dot">1</span>
                    <span class="header-txt">UPLOAD DESIGN</span>
                </div>

                <div class="col">
                    <span class="dot">2</span>
                    <span class="header-txt">SKETCH2CODE IS AT WORK!</span>
                </div>

                <div class="col">

                    <span class="dot active">3</span>

                    <span class="header-txt active">DOWNLOAD YOUR HTML</span>
                </div>
            </div>
        </div>

        <div id="content">
            <div id="title">
                <h1>
                    <span class="main">Sketch</span>
                    <span class="number">2</span>
                    <span class="main">Code</span>
                </h1>

                <h2 class="subtitle">Transform any hands-drawn design into a HTML code with AI.</h2>
                <h3 class="subtitle2 text-white">It's done!</h3>
            </div>

            <div id="actions" class="container-fluid">
                <div class="row justify-content-center">

                    <div class="col-6 col-md-3 text-center">
                        <p>YOUR SKETCH</p>
                        <img alt="Your sketch" class="img-fluid" src="/content/img/step2_leftCircle.png" width="200px" height="200px">
                    </div>
                    <div class="col-6 col-md-3 text-center">
                        <p> YOUR HTML</p>
                        <img alt="Your html code" class="img-fluid" src="/content/img/step2_rightCircle%20(2).png" width="200px" height="200px">
                    </div>


                </div>
                <div class="row justify-content-center">
                    <img alt="Success" id="success" src="/content/img/button_success.png" width="100px" height="100px">
                </div>

                <div class="row justify-content-center">
                    <img alt="Download html" src="/content/img/button_download.svg" width="300px">
                </div>
                <div class="row justify-content-center pt-3 pb-3">
                    <img alt="Predicted object details" src="/content/img/predicted_object_details.svg" width="300px">
                </div>
                <div class="row justify-content-center pb-3">
                    <a href="/" id="main_02_startOver"><span style="text-decoration: underline;">OR START OVER</span></a>
                </div>

            </div>

            
    </div>



    <div class="content-footer">
        
        <div class="container-fluid">

            <div class="row hidden-responsive">

                <div class="col">
                    <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end center-logo-left" src="/content/img/logo_MS.png">
                </div>
                <div class="col">
                    <img alt="Logo web" class="img-fluid float-right center-logo-right" src="/content/img/img_spareMobile.svg">
                </div>
            </div>

            <div class="row justify-content-center hidden-md">
                <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end" src="/content/img/logo_MS.png">
            </div>

        </div>
            <div id="footer" class="p-3 p-md-3">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="text-center text-white pb-4">
                            Your picture may be used to improve the underlying AI.
                        </div>
                    </div>
                    <div class="row footer-links2">
                        <div class="col"><a target="_blank" href="https://www.ailab.microsoft.com/">AI Lab</a></div>
                        <div class="col"><a target="_blank" href="https://support.microsoft.com/en-us/contactus">Contact Us</a></div>
                        <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy &amp; Cookies</a></div>
                        <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkID=206977">Terms of use</a></div>
                        <div class="col"><a target="_blank" href="https://www.microsoft.com/trademarks">Trademarks</a></div>
                    </div>
                </div>
                <div class="text-center text-white pt-5">
                    © Microsoft 2018
                </div>
            </div>
        </div>

            <script src="/Scripts/jquery-3.0.0.js"></script>
            <script src="/Scripts/bootstrap.js"></script>

</body>
</html>